<!-- 重点危化品 -->
<template>
    <div class="majorDangerous">
        <div class="majorDangerous_all">
            <span>总量</span>
            <div v-for="(item, index) in data.all" :key="index">{{ item }}</div>
            <span>㎡</span>
        </div>
        <ul class="majorDangerous_box">
            <li v-for="(item, index) in data.list" :key="index">
                <div>
                    <div class="borders"></div>
                    <span>{{ item.name }}</span>
                </div>
                <p>{{ item.value }}㎡</p>
            </li>
        </ul>
    </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';

const data = reactive({
    all: [1, 0, 0],
    list: [
        { name: '原油', value: '20' },
        { name: '汽油', value: '20' },
        { name: '石脑油', value: '20' },
        { name: '氢气', value: '20' },
        { name: '氨', value: '20' },
        { name: '甲醇', value: '20' },
        { name: '甲苯', value: '20' },
        { name: '一氧化碳', value: '20' }
    ]
});
</script>

<style scoped lang="scss">
.majorDangerous {
    &_box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        li {
            background: url('@img/imterBg_2.png') no-repeat;
            width: 47%;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-right: 13px;
            padding: 0 16px;
            box-sizing: border-box;
            margin-top: 10px;
            > div {
                display: flex;
                align-items: center;
                .borders {
                    width: 4px;
                    height: 10px;
                    background: #ffffff;
                    margin-right: 10px;
                }
                span {
                    @include fontCustomStyle(#fff, 12px);
                }
            }
            p {
                @include fontCustomStyle(#0e96ff, 20px);
                @include pmzd();
            }

            &:nth-of-type(2n) {
                margin-right: 0;
            }
        }
    }
    &_all {
        display: flex;
        align-items: center;
        justify-content: center;
        span {
            color: #ffffff;
            font-size: 12px;
            &:last-of-type {
                margin-left: 11px;
            }
            &:first-of-type {
                margin-right: 14px;
            }
        }

        > div {
            background: url('@img/imterBg.png') no-repeat;
            background-size: 100% 100%;
            width: 26px;
            height: vh(40);
            line-height: vh(40);
            color: #fff;
            font-size: 28px;
            text-align: center;
            margin-right: 3px;
        }
    }
}
</style>
